<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col content">
			<view v-if='oldAddress'>
				<view class="title">Your digital wallet address</view>
				<view class="address">{{oldAddress}}</view>
			</view>
			<text class="fun-self-start font text_5" v-if='oldAddress'>Change a new address</text>
			<text class="fun-self-start font_2 text_6">Select a protocal</text>
			<view class="fun-flex-col fun-self-stretch group_2">
				<view class="fun-flex-col fun-justify-start fun-items-center fun-self-start text-wrapper">
					<text class="font_4 text_7">USDT-TRC20</text>
				</view>
				<text class="fun-self-stretch font_5 text_8 mt-13">
					Plaese note:Currently we have only developed USDT withdrawal. Other currency withdrawal methods are coming soon.
				</text>
			</view>
			
			<view class="newAddress">
				<text class="title">Your new address</text>
				<input type="text" v-model="queryData.address" placeholder="Enter your new address"/>
				<text class="fun-mt-10 font_5 text_11">
					Please proofread your address carefully. We are using multiple technology to protect the safety of your digital assets.
				</text>
			</view>


			<view class="fun-flex-col group_4">
				<view class="fun-flex-row fun-items-center group_5">
					<text class="font_6 text_12">Bond email :</text>
					<text class="fun-ml-14 font_3">{{email}}</text>
				</view>
				
				<view class="fun-mt-10 fun-flex-col group_6">
					<text class="vertify">Verification Code</text>
					
					<view class="fun-flex-row fun-justify-between fun-items-end verify-con">
						<input type="tel" v-model="queryData.verificationCode" placeholder="Enter verification Code"/>
						<view class="send" @click="send">Send</view>
					</view>
				</view>
				
				<text class="tips">A verification code has been sent to {{email}}.</text>
			</view>

			<view class="btn" @click="confirm">Confirm</text></view>
		</view>
		
		<common-modal v-if='isShowModal' :popData="popData" @done="done" @close='isShowModal = false'></common-modal>
	</view>
</template>

<script>
	import commonModal from "@/components/commonModal.vue";
	import {bindWithdrawalAddress} from "@/api/account.js"
	import {captchaEmail} from "@/api/common.js"
	export default {
		data() {
			return {
				queryData:{
					currency:"usdttrc20",
					address:"",
					verificationId:'',
					verificationCode:""
				},
				isShowModal:false,
				popData:{},
				oldAddress: "",
				email:""
			};
		},
		
		onLoad(option) {
			this.oldAddress = decodeURIComponent(option?.address || "") || "";
			console.log(this.oldAddress,"this.oldAddresss")
			this.email = uni.getStorageSync("userInfo")?.email;
			if(!this.email){
				this.popData = {
					icon:require("@/static/common/post.png"),
					title:"Bind an e-mail address first!",
					content:"Tie your email before withdraw and don't miss our important notifications!",
					btnText:["Continue"]
				}
				this.isShowModal = true;
			}
		},
		methods: {
			confirm(){
				if(!this.queryData.address){
					this.UTILS.logStr("Enter your new address");
					return;
				}
				if(!this.queryData.verificationCode){
					this.UTILS.logStr("Enter Verification Code");
					return;
				}
				
				bindWithdrawalAddress(this.queryData).then(res => {
					if(res.code == 0){
						if(this.oldAddress){//换绑
							uni.navigateTo({
								url:'/pages/login/success?tips=You have submitted a request to change your digital wallet address. &subTips=You have submitted a request to change your digital wallet address. &pageType=tab&btnText=DONE&backUrl=/pages/more/index',
							})
						}
						else{//初次绑定
							uni.navigateTo({
								url:'/pages/login/success?tips=You have successfully bound a digital currency address.&subTips=Please note: The first time you bind an address it takes 48 hours before you can make a withdrawal.&pageType=tab&btnText=DONE&backUrl=/pages/more/index',
							})
						}
					}
					else{
						this.queryData.verificationCode = "";
						this.UTILS.logStr(res.msg || "获取验证码失败")
					}
				})
			},
			
			send(){
				const parmas = {
					type:2,
					email:this.email
				}
				captchaEmail(parmas).then(res => {
					if(res.code == 0){
						this.queryData.verificationId = res.data?.verificationId;
					}
					else{
						this.queryData.verificationCode = "";
						this.queryData.verificationId = "";
						this.UTILS.logStr(res.msg || "获取验证码失败")
					}
				})
			},
			
			done(){
				uni.navigateTo({url:`/pages/more/bindEmail`})
			}
		},
		
		components:{
			commonModal
		}
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-17 {
		margin-top: 34rpx;
	}

	.mt-5 {
		margin-top: 10rpx;
	}

	.page {
		padding: 40rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.content {
			.title{
				font-weight: 500;
				font-size: 32rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
			.address{
				width: 100%;
				font-weight: 500;
				font-size: 32rpx;
				color: #121212;
				line-height: 40rpx;
				word-break: break-all;
				overflow-wrap: break-word;
				padding-bottom:20rpx;
				border-bottom:2rpx solid #00000033;
			}
			.font_2 {
				font-size: 32rpx;
				font-family: SF Pro Display;
				color: #000000;
			}

			.font_3 {
				font-size: 32rpx;
				color: #121212;
			}

			.text_4 {
				margin-left: 8rpx;
				margin-top: 32rpx;
			}

			.divider {
				margin-right: 16rpx;
				margin-top: 24rpx;
				background-color: #00000033;
				height: 2rpx;
			}

			.text_5 {
				margin: 28rpx 0;
				font-weight: 700;
			}

			.group_2 {
				margin-top: 20rpx;
				.text-wrapper {
					padding: 24rpx 0;
					background-color: #f6f6f6;
					border-radius: 16rpx;
					width: 358rpx;
					border: solid 2rpx #1a7b99;

					.text_7 {
						color: #1a7b99;
						font-weight: unset;
					}
				}
			}

			.text_9 {
				margin-left: 8rpx;
				margin-top: 28rpx;
			}

			.newAddress {
				margin-top: 20rpx;
				.title{
					font-weight: 500;
					font-size: 32rpx;
					line-height: 40rpx;
				}
				input{
					padding: 24rpx 8rpx;
					border: 2rpx solid #1A7B99;
					font-weight: 500;
					font-size: 32rpx;
					color: #121212;
					line-height: 40rpx;
					margin-bottom: 16rpx;
					margin-top: 6rpx;
				}
				.text-wrapper_2 {
					margin-right: 12rpx;
					padding: 36rpx 0 28rpx;
					background-image: url('https://ide.code.fun/api/image?token=671e89b1c471750012dd23ac&name=f1fe8ace27312a805a5d124bc22b4611.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.text_10 {
						margin-left: 8rpx;
						margin-right: 32rpx;
					}
				}

				.text_11 {
					color: #b0b1bf;
				}
			}

			.font_5 {
				font-size: 24rpx;
				color: #b0b0bf;
			}

			.group_4 {
				margin-top: 60rpx;
				.group_6 {
					margin-top: 20rpx;
					.vertify{
						font-weight: 500;
						font-size: 32rpx;
						color: #3F3F3F;
						line-height: 40rpx;
						margin-bottom: 8rpx;
					}
					.verify-con {
						input{
							flex: 1;
							padding: 20rpx 0;
							border-bottom: 2rpx solid #D9D9D9;
						}
						.send{
							width: 164rpx;
							height: 70rpx;
							text-align: center;
							line-height: 70rpx;
							background: #1A7B99;
							border-radius: 10rpx;
							font-weight: bold;
							font-size: 14px;
							color: #FFFFFF;
						}
					}
				}
				.tips{
					 margin-top: 20rpx;
					font-size: 24rpx;
					color: #B0B1BF;
				}
				.font_6 {
					font-size: 32rpx;
					color: #3e3e3e;
				}
			}

			.font_4 {
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}

			.btn {
				width: 100%;
				padding: 20rpx 0;
				background: #1A7B99;
				border-radius: 10rpx;
				margin-top: 110rpx;
				font-weight: bold;
				font-size: 32rpx;
				text-align: center;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.font {
			font-size: 36rpx;
			color: #000000;
		}
		:deep(.popup-con-btn){
			.left{
				background: #1A7B99;
				color: #fff;
			}
		}
	}
</style>